<template>
	<view>
		<view v-for="(item,index) in cartList" class="flex align-center padding bg-fff">
			<text :class="{active:item.ischeck}" @tap="handleCheck(index)" class="iconfont icon-gouxuan margin-right"></text>
			<image class="poster margin-right-sm" :src="item.img" mode=""></image>
			<view class="info">
				<view class="flex justify-between">
					<view class="">
						<view class="">
							{{item.name}}
						</view>
						{{item.french}}
					</view>
					<view @tap="handleEdit(item,index)" class="edit">
						<text class="iconfont icon-bianji"></text>
					</view>
				</view>
				<view class="flex justify-between margin-top">
					<view class="">
						￥{{item.list[item.dropIdx].price}}
					</view>
					<view class="">
						{{item.list[item.dropIdx].spec}} x {{item.num}}
					</view>
				</view>
			</view>
			
		</view>
		<good-spec v-if="show"></good-spec>
		<view class="flex align-center justify-between my-fixed-bottom bg-fff my-shadow">
			<view>
				<text @tap="handleAllCheck" :class="{active:allInfo.allCheck}" class="iconfont icon-gouxuan margin-lr"></text>
				合计:{{allInfo.allPrice}}元
			</view>
			<view @tap="handleOrder" class="padding bg-yellow">
				立即结算
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			...mapState({
				userInfo:state=>state.user.userInfo,
				cartList:state=>state.cart.cartList,
				show:state=>state.cart.show
			}),
			...mapGetters({
				allInfo:['cart/allInfo']
			})
		},
		onShow() {
			if(!this.userInfo){
				uni.showModal({
					title:'请登录后再操作',
					content:'登录以便为您提供更好的服务!',
					cancelText:'稍后再说',
					confirmText:'立即登录',
					success:({confirm})=>{
						if(confirm){
							uni.navigateTo({
								url:'../my/login'
							})
							return
						}
						uni.navigateBack({
							delta:1
						})
					}
				})
			}
		},
		methods: {
			handleCheck(idx){
				this.$store.commit('cart/cartCheckMut',idx)
			},
			handleAllCheck(){
				this.$store.commit('cart/cartAllCheckMut',this.allInfo.allCheck)
			},
			handleEdit(obj,idx){ //编辑按钮
				this.$store.commit('cart/initOverlayDataMut',{
					obj,
					edit:idx
				})
			},
			handleOrder(){
				uni.navigateTo({
					url:'../order/order'
				})
			}
		}
	}
</script>

<style lang="scss">
.poster{
	width: 200upx;
	height: 200upx;
}
.info{
	flex: 1;
}
.edit{
	height: 60upx;
	width: 60upx;
	background-color: #d8d8d8;
	text-align: center;
	line-height: 60upx;
	border-radius: 50%;
}
.icon-gouxuan{
	color: #d8d8d8;
	&.active{
		color: #FAE456;
	}
}
</style>
